<template>
    <!-- <vue-plyr>
  <video poster="poster.png" src="video.mp4">
    <source src="video-720p.mp4" type="video/mp4" size="720">
    <source src="video-1080p.mp4" type="video/mp4" size="1080">
    <track kind="captions" label="English" srclang="en" src="captions-en.vtt" default>
  </video>
</vue-plyr> -->
    <!-- <vue-plyr :options="{i18n:{speed:'播放速度',normal:'默认',quality:'画质'},settings:[ 'quality', 'speed']}">
        <video poster="https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg" src="http://vjs.zencdn.net/v/oceans.mp4">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" size="720">
            <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" size="1080">
            <track kind="captions" label="English" srclang="en" src="captions-en.vtt" default>
        </video>
    </vue-plyr> -->
    <div class="container">
        <!-- <Card :bordered="false">
            <p slot="title">Borderless card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <skeleton/>
        </Card> -->

        <div class="div">
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <p>Content of card</p>
            <skeleton :animate="switchModal2" :paragraph.sync="paragraphNum" v-if="showSkeleton" :avatar="switchModal3"/>
        </div>
        开关骨架屏：<i-switch v-model="switchModal" @on-change="change" style="margin:20px"/>
        骨架屏动画：<i-switch v-model="switchModal2" @on-change="change2" style="margin:20px"/>
        骨架屏包含头像：<i-switch v-model="switchModal3" @on-change="change3" style="margin:20px"/>
        骨架屏段落数：<i-input v-model="paragraphNum" number type="number" style="width:200px"/>
    </div>
</template>

<script>
    import skeleton from "@/components/skeleton"
    export default {
        components: {
            skeleton
        },
        data() {
            return {
                switchModal:true,
                showSkeleton: true,
                switchModal2: true,
                switchModal3: true,
                paragraphNum: 4
            }
        },
        methods: {
            change(e) {
                this.showSkeleton = e;
            },
             change2(e) {
                this.switchModal2 = e;
            },
             change3(e) {
                this.switchModal3 = e;
            }
        },
    }
</script>
<style lang="less" scoped>
    .container{
        background: #fff;
        width: 100%;
        height: 100%;
    }
    .div{
        width: 500px;
        min-height: 500px;
        position: relative;
        p{
            margin:16px;
        }
    }
</style>

